<template>
	<div class="login-container">
		<div class="login-icon-group">
			<div class="login-icon-group-title">
				<img src="/favicon.png" />
				<div class="login-icon-group-title-text font25">{{ getThemeConfig.globalViceTitle }}</div>
			</div>
		</div>
		<div class="login-content">
			<div class="login-content-main">
				<h4 class="login-content-title ml15">账号密码找回</h4>
				<div>
					<el-steps :active="stepsActive">
						<el-step title="第一步">
							<template #icon>
								<SvgIcon name="iconfont icon-1_round_solid" :size="20" />
							</template>
						</el-step>
						<el-step title="第二步">
							<template #icon>
								<SvgIcon name="iconfont icon-2_round_solid" :size="20" />
							</template>
						</el-step>
						<el-step title="第三步">
							<template #icon>
								<SvgIcon name="iconfont icon-3_round_solid" :size="20" />
							</template>
						</el-step>
					</el-steps>
					
					<el-form class="forget-form" size="default" ref="verifyFormRef" :model="formData" :rules="formRules" v-if="stepsActive === 1">
						<el-form-item class="login-animation1" prop="tenantId" v-if="tenantEnable">
							<el-input type="text" :placeholder="$t('message.mobile.placeholder1')" v-model="formData.tenantId" clearable autocomplete="off">
								<template #prefix>
									<el-icon class="el-input__icon"><el-icon-user /></el-icon>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item class="login-animation2" label="" prop="loginName">
							<el-input type="text" :placeholder="$t('message.mobile.placeholder2')" v-model="formData.loginName" clearable autocomplete="off">
								<template #prefix>
									<el-icon class="el-input__icon"><el-icon-phone /></el-icon>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item class="login-animation3" label="" prop="verifyCode">
							<el-row :gutter="10" class="w100">
								<el-col :span="15">
									<el-input type="text" :placeholder="$t('message.mobile.placeholder3')" v-model="formData.verifyCode" clearable autocomplete="off">
										<template #prefix>
											<el-icon class="el-input__icon"><el-icon-position /></el-icon>
										</template>
									</el-input>
								</el-col>
								<el-col :span="9">
									<el-button class="forget-content-code" :disabled="countDown > 0" @click="onSendVerifyCode">{{ verifyBtnText }}</el-button>
								</el-col>
							</el-row>
						</el-form-item>
					</el-form>
					
					<el-form class="forget-form" size="default" ref="resetFormRef" :model="formData" :rules="formRules" v-if="stepsActive === 2">
						<el-row :gutter="35">
							<el-col>
								<el-form-item label="" prop="loginName">
									<el-input v-model="formData.loginName" placeholder="请输入登录账号" readonly clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="" prop="password">
									<el-input type="password" v-model="formData.password" placeholder="请输入登录密码" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="" prop="confirmPassword">
									<el-input type="password" v-model="formData.confirmPassword" placeholder="请输入确认密码" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					
					<el-result icon="success" title="密码重置成功" subTitle="" v-if="stepsActive === 3"></el-result>
					
					<center>
						<el-button @click="onVerifyFormSubmit" v-if="stepsActive === 1" size="default" class="mt15" icon="el-icon-arrow-right" type="primary">
							下一步
						</el-button>
						<el-button @click="onResetFormSubmit" v-if="stepsActive === 2" size="default" class="mt15" icon="el-icon-refresh" type="primary">
							重 置
						</el-button>
						<el-button @click="onSubmit" v-if="stepsActive === 3" size="default" class="mt15" icon="el-icon-check" type="primary">
							完 成
						</el-button>
					</center>
					
					<div class="font12 login-animation4 login-msg mt20">{{ $t('message.other.tips') }}</div>
				</div>
			</div>
		</div>
		<div class="login-copyright">
			<div class="mb5 login-copyright-company">{{ $t('message.copyright.company') }}</div>
			<div class="login-copyright-msg">{{ $t('message.copyright.recordno') }}</div>
		</div>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { ElMessage } from 'element-plus';
import { Local, Session } from '/@/utils/storage';
import { SM } from '/@/utils/sm';
import { verifyPassword } from '/@/utils/toolsValidate';
import { getConfigLogin, kaptchaSend, forgetPasswordVerify, forgetPasswordReset } from '/@/api/login/index';
export default defineComponent({
	name: 'forget',
	setup(props) {
		const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const router = useRouter();
		const verifyFormRef = ref();
		const resetFormRef = ref();
		const validPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('登录密码不能为空'));
			}
			if(!verifyPassword(value)){
				return callback(new Error('只允许字母数字和 !@#$%^&.*_ 组成6~16个字符'));
			}
			callback();
		}
		const validConfirmPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('确认密码不能为空'));
			}
			if(state.formData.password != value){
				return callback(new Error('确认密码和登录密码不一致'));
			}
			callback();
		}
		const publicKey = Local.get('publicKey');
		
		const state = reactive({
			stepsActive: 1,
			tenantEnable: false,
			countDown: 0,
			verifyBtnText: '获取验证码',
			formData: {
				tenantId: '',
				loginName: '',
				password: '',
				confirmPassword: '',
				verifyKey: '',
				verifyCode: '',
			},
			formRules: {
				tenantId: {required: true, message: '租户号码不能为空', trigger: 'blur' },
				loginName: {required: true, message: '登录账号不能为空', trigger: 'blur' },
				password: { required: false, validator: validPassword, trigger: 'blur' },
				confirmPassword: { required: false, validator: validConfirmPassword, trigger: 'blur' },
				verifyCode: { required: false, message: '验证码不能为空', trigger: 'blur' },
			}
		});
		// 获取验证码
		const onSendVerifyCode = () => {
			verifyFormRef.value.validate(valid => {
				if(valid){
					Session.set('tenantId', state.formData.tenantId);
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					kaptchaSend({'loginName': loginName}).then(res => {
						if(res.code == 0){
							ElMessage.success('验证码发送成功');
							state.formRules.verifyCode.required = true;
							state.countDown = 60;
							const t = setInterval(() => {
								state.countDown--;
								state.verifyBtnText = `重新发送（${state.countDown}）`;
							}, 1000);
							setTimeout(() => {
								clearInterval(t);
								state.countDown = 0;
								state.verifyBtnText = '获取验证码';
							}, 61 * 1000);
						}
					})
				}
			})
		}
		// 下一步点击
		const onVerifyFormSubmit = () => {
			verifyFormRef.value.validate(valid => {
				if(valid){
					Session.set('tenantId', state.formData.tenantId);
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					forgetPasswordVerify({
						'loginName': loginName,
						'verifyCode': state.formData.verifyCode,
					}).then(res => {
						if(res.code == 0){
							state.formData.verifyKey = res.data;
							state.stepsActive = 2;
							state.formRules.password.required = true;
							state.formRules.confirmPassword.required = true;
							state.formRules.verifyCode.required = false;
						}
					})
				}
			})
		}
		// 下一步点击
		const onResetFormSubmit = () => {
			resetFormRef.value.validate(valid => {
				if(valid){
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					let password = SM.sm2Encrypt(state.formData.password, publicKey);
			
					let params = {
						loginName: loginName,
						password: password,
						verifyKey: state.formData.verifyKey
					}
					Session.set('tenantId', state.formData.tenantId);
					forgetPasswordReset(params).then((res) => {
						if(res.code === 0){
							state.stepsActive = 3;
						}
					});
				}
			});
		}
		// 获取布局配置信息
		const getThemeConfig = computed(() => {
			return themeConfig.value;
		});
		// 完成
		const onSubmit = () => {
			router.push({
				path: 'login'
			});
		}

		onMounted(async () => {
			Session.clear();
			await getConfigLogin().then((res: any) => {
				if(res.code == 0){
					state.tenantEnable = res.data?.tenantEnable;
				}
			})
		});
		
		return {
			verifyFormRef,
			resetFormRef,
			getThemeConfig,
			onSendVerifyCode,
			onVerifyFormSubmit,
			onResetFormSubmit,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.login-container {
	width: 100%;
	height: 100%;
	position: relative;
	background: url('https://bing.img.run/uhd.php') no-repeat;
	background-size: 100% 100%;
	.forget-form {
		@for $i from 1 through 5 {
			.login-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/10) + s;
			}
		}

		.forget-content-code {
			width: 100%;
			padding: 0;
		}
	}
	.login-icon-group {
		width: 100%;
		height: 100%;
		position: relative;
		.login-icon-group-title {
			position: absolute;
			top: 50px;
			left: 80px;
			display: flex;
			align-items: center;
			img {
				width: 30px;
				height: 30px;
			}
			&-text {
				padding-left: 15px;
				color: var(--el-color-primary);
			}
		}
	}
	.login-content {
		width: 500px;
		padding: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate3d(0, 0, 0);
		background-color: var(--el-color-white);
		border: 5px solid var(--el-color-primary-light-8);
		border-radius: 4px;
		transition: height 0.2s linear;
		height: 480px;
		overflow: hidden;
		z-index: 1;
		.login-content-main {
			margin: 0 auto;
			width: 80%;
			.login-content-title {
				color: var(--el-text-color-primary);
				font-weight: 500;
				font-size: 22px;
				text-align: center;
				letter-spacing: 4px;
				margin: 15px 0 30px;
				white-space: nowrap;
				z-index: 5;
				position: relative;
				transition: all 0.3s ease;
			}
			.forget-form {
				margin-top: 20px;
				padding: 0 1px;
			}
		}
		.login-content-main-sacn {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			overflow: hidden;
			cursor: pointer;
			transition: all ease 0.3s;
			color: var(--el-text-color-primary);
			&-delta {
				position: absolute;
				width: 35px;
				height: 70px;
				z-index: 2;
				top: 2px;
				right: 21px;
				background: var(--el-color-white);
				transform: rotate(-45deg);
			}
			&:hover {
				opacity: 1;
				transition: all ease 0.3s;
				color: var(--el-color-primary) !important;
			}
			i {
				width: 47px;
				height: 50px;
				display: inline-block;
				font-size: 48px;
				position: absolute;
				right: 2px;
				top: -1px;
			}
		}
	}
	.login-msg {
		color: var(--el-text-color-placeholder);
	}
	.login-copyright {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30px;
		text-align: center;
		color: var(--el-color-white);
		font-size: 12px;
		opacity: 0.8;
		.login-copyright-company {
			white-space: nowrap;
		}
		.login-copyright-msg {
			@extend .login-copyright-company;
		}
	}
}
</style>
